<template>
  <div class="personal layout-pd">
    <!-- 会员信息 -->
    <el-col :span="24">
      <el-card shadow="hover" header="会员信息">
        <div class="personal-user">
          <div class="personal-user-right">
            <el-row>
              <el-col :span="24">
                <el-row>
                  <el-col :xs="24" :sm="8" class="personal-item mb12">
                    <div class="personal-item-label">会员等级：</div>
                    <div class="personal-item-value">
                      <el-text type="warning" size="small">黄金</el-text>
                    </div>
                    <el-tag @click="toPay" style="margin-left: 20px;cursor: pointer" type="danger">成为会员</el-tag>
                  </el-col>
                  <el-col :xs="24" :sm="16" class="personal-item mb12">
                    <div class="personal-item-label">状态：</div>
                    <div class="personal-item-value">
                      <el-text type="warning" size="small">可用</el-text>
                    </div>
                  </el-col>

                </el-row>
              </el-col>
<!--              <el-col :span="24">-->
<!--                <el-row>-->
<!--                  <el-col :xs="24" :sm="8" class="personal-item mb6">-->
<!--                    <div class="personal-item-label">登录IP：</div>-->
<!--                    <div class="personal-item-value">192.168.1.1</div>-->
<!--                  </el-col>-->
<!--                  <el-col :xs="24" :sm="16" class="personal-item mb6">-->
<!--                    <div class="personal-item-label">登录时间：</div>-->
<!--                    <div class="personal-item-value">2021-02-05 18:47:26</div>-->
<!--                  </el-col>-->
<!--                </el-row>-->
<!--              </el-col>-->
            </el-row>
          </div>
        </div>
      </el-card>
    </el-col>
    <!-- 更新信息 -->
    <el-col :span="24">
      <el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
        <div class="personal-edit-title">基本信息</div>
        <el-form ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules"
                 label-position="top" label-width="40px" class="mt35 mb35">
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" placeholder="请输入旧密码" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
              <el-form-item label="新密码" label-width="auto" prop="new_password">
                <el-input type="password" v-model="ruleForm.new_password" placeholder="请输入新密码"
                          clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
              <el-form-item label="重复新密码" label-width="auto" prop="confirm_password">
                <el-input type="password" v-model="ruleForm.confirm_password" placeholder="请输入重复新密码"
                          clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="35">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item>
                <el-button type="primary" v-waves :loading="ruleForm.loading" @click="submitForm(ruleFormRef)">
                  <el-icon>
                    <ele-Position/>
                  </el-icon>
                  更新密码
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

      </el-card>
    </el-col>
  </div>
</template>

<script setup lang="ts" name="personal">
import {reactive, ref} from 'vue';
import {ElMessage} from 'element-plus';
import type {FormInstance, FormRules} from 'element-plus'
import {userCenterApi} from '/@/api/user/index';
import {useRouter} from 'vue-router';

interface RuleForm {
  password: string
  new_password: string
  confirm_password: string
}

const router = useRouter(); // 获取路由实例
const ruleFormRef = ref<FormInstance>()
// 定义变量内容
const ruleForm = reactive<RuleForm>({
  password: '',
  new_password: '',
  confirm_password: '',
  loading: false
})

const rules = reactive<FormRules<RuleForm>>({
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 10, message: '长度在6-10位', trigger: 'blur'},
  ],
  new_password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 10, message: '长度在6-10位', trigger: 'blur'},
  ],
  confirm_password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 10, message: '长度在6-10位', trigger: 'blur'},
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      console.log('submit');
      try {
        ruleForm.loading = true;
        await userCenterApi().updateUserInfo(ruleForm);
        ElMessage.success('密码更新成功！');
        setTimeout(() => {
          router.push('/home');
        }, 1500)
      } catch (error) {
        // console.error('更新用户信息失败:', error);
        ElMessage.error('密码更新失败，请稍后重试！');
      } finally {
        ruleForm.loading = false;
      }
    } else {
      ElMessage.warning('表单验证失败，请检查输入！');
    }
  })
}
const toPay=()=>{
  router.push('/wechat')
}
</script>

<style scoped lang="scss">
@import '../../theme/mixins/index.scss';

.personal {
  .personal-user {
    height: 130px;
    display: flex;
    align-items: center;

    .personal-user-left {
      width: 100px;
      height: 130px;
      border-radius: 3px;

      :deep(.el-upload) {
        height: 100%;
      }

      .personal-user-left-upload {
        img {
          width: 100%;
          height: 100%;
          border-radius: 3px;
        }

        &:hover {
          img {
            animation: logoAnimation 0.3s ease-in-out;
          }
        }
      }
    }

    .personal-user-right {
      flex: 1;
      padding: 0 15px;

      .personal-title {
        font-size: 18px;
        @include text-ellipsis(1);
      }

      .personal-item {
        display: flex;
        align-items: center;
        font-size: 13px;

        .personal-item-label {
          color: var(--el-text-color-secondary);
          @include text-ellipsis(1);
        }

        .personal-item-value {
          @include text-ellipsis(1);
        }
      }
    }
  }

  .personal-info {
    .personal-info-more {
      float: right;
      color: var(--el-text-color-secondary);
      font-size: 13px;

      &:hover {
        color: var(--el-color-primary);
        cursor: pointer;
      }
    }

    .personal-info-box {
      height: 130px;
      overflow: hidden;

      .personal-info-ul {
        list-style: none;

        .personal-info-li {
          font-size: 13px;
          padding-bottom: 10px;

          .personal-info-li-title {
            display: inline-block;
            @include text-ellipsis(1);
            color: var(--el-text-color-secondary);
            text-decoration: none;
          }

          & a:hover {
            color: var(--el-color-primary);
            cursor: pointer;
          }
        }
      }
    }
  }

  .personal-recommend-row {
    .personal-recommend-col {
      .personal-recommend {
        position: relative;
        height: 100px;
        border-radius: 3px;
        overflow: hidden;
        cursor: pointer;

        &:hover {
          i {
            right: 0px !important;
            bottom: 0px !important;
            transition: all ease 0.3s;
          }
        }

        i {
          position: absolute;
          right: -10px;
          bottom: -10px;
          font-size: 70px;
          transform: rotate(-30deg);
          transition: all ease 0.3s;
        }

        .personal-recommend-auto {
          padding: 15px;
          position: absolute;
          left: 0;
          top: 5%;
          color: var(--next-color-white);

          .personal-recommend-msg {
            font-size: 12px;
            margin-top: 10px;
          }
        }
      }
    }
  }

  .personal-edit {
    .personal-edit-title {
      position: relative;
      padding-left: 10px;
      color: var(--el-text-color-regular);

      &::after {
        content: '';
        width: 2px;
        height: 10px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: var(--el-color-primary);
      }
    }

    .personal-edit-safe-box {
      border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
      padding: 15px 0;

      .personal-edit-safe-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .personal-edit-safe-item-left {
          flex: 1;
          overflow: hidden;

          .personal-edit-safe-item-left-label {
            color: var(--el-text-color-regular);
            margin-bottom: 5px;
          }

          .personal-edit-safe-item-left-value {
            color: var(--el-text-color-secondary);
            @include text-ellipsis(1);
            margin-right: 15px;
          }
        }
      }

      &:last-of-type {
        padding-bottom: 0;
        border-bottom: none;
      }
    }
  }
}
</style>
